<template>
  <div class="container" style="background-color: #fff; width: 100vw">
    <div style="padding: 2.25rem">
      <div class="box col-12 col-sm-6">
        <div class="kuai" v-for="(item, index) in arr" :key="index">
          <img
            :src="item.icon"
            style="width: 3.75rem; height: 3.75rem; margin: 0 auto"
            alt=""
          />
          <h5>{{ item.title }}</h5>
          <p style="color: #57757f">
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
let arr = [
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E4%B8%8A%E8%AF%BE-150x150.png",
    title: "雄厚的师资力量",
    content: "建立了完善的教学管理体系，为您提供专业的消防培训课程。",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E6%8E%88%E8%AF%BE-150x150.png",
    title: "完善的教学设施",
    content:
      "拥有培训场地6500多平方米，可以同时满足课堂培训、实操培训等多种形式的教学场地。",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E5%8E%86%E5%8F%B2-150x150.png",
    title: "科学的管理模式",
    content: "学院日常管理工作实行院长负责制，各项工作实行分工合作，各负其责。",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E7%94%A8%E5%BF%83%E6%9C%8D%E5%8A%A1-150x150.png",
    title: "优质的后勤服务",
    content:
      "兴建了1000多平方米的餐厅，设置了4人/间的宿舍，以满足企事业单位的培训需求。",
  },
];
</script>

<style scoped>
.box {
  margin: 0 auto;
  display: flex;
  justify-content: center;

  width: 95%;
  height: 16.5237rem;
  text-align: center;
  height: auto;
  min-height: unset;
  border-top-width: 0px;
  border-top-color: rgb(221, 221, 221);

  box-shadow: 0px 0px 10px #999;
  font-size: 1rem;
}
.kuai {
  width: 308px;
  height: 100%;
  padding: 1.875rem;
  border-right: 1px solid #ccc;
  &:nth-child(4) {
    border-right: 0px solid #ccc;
  }

  h5 {
    padding: 25px;
    font-weight: bolder;
  }
}

@media (min-width: 150px) and (max-width: 990px) {
  .box {
    flex-wrap: wrap;
  }
  .kuai {
    border-right: 0px solid #ccc;
  }
}
</style>
